<template>
	<div>
		<Card>
			装修圈列表 <Icon type="ios-arrow-forward" /> 标签管理
		</Card>
		<Card>
			<p style="text-align: right;">
				<span @click=" modal1 = true " style="cursor: pointer;"><Icon type="md-add" style="font-size: 20px;margin: -3px 5px 0 0;" />新增标签</span>
			</p>
			<br />
			 <Table border :columns="columns1" :data="labelList"></Table>
		</Card>
		<Modal
        v-model="modal1"
        title="添加新标签"
        @on-ok="ok"
        @on-cancel="cancel">
        标签：
        <Input placeholder="请输入新增标签~" style="width: auto" v-model="addLabel">
            <Icon type="ios-arrow-dropright" slot="prefix" />
        </Input>
    </Modal>
	</div>
</template>

<script>
	import path from '@/api/path.js';
	let url = path.url;
	import axios from '@/libs/api.request';
	export default {
		data(){
			return {
				modal1: false,
				addLabel: '',
				 columns1: [
                    {
                        title: '编号',
                        key: 'id',
						align: 'center'
                    },
                    {
                        title: '标签',
                        key: 'label',
						align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'address',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									style: {
										marginRight: '10px'
									},
									on: {
										click: (e) => {
											this.delLabel(params.row.id);
										}
									}
								}, '删除')
							]);
						}
                    }
                ],
				labelList: this.$store.state.articleLabel
			}
		},
		methods: {
			getLabelList(state){
				axios.request({
					url: `${url}Article/getArticleCateList`,
					methods: 'post',
					}).then(res=>{
						if ( res.data.status == 1 ) {
							this.labelList = res.data.content.data
						} else {
							throw res.msg
						}
					})
			},
			ok () {
				axios.request({
					url: `${url}Article/addArticleCate`,
					method: 'post',
					data: {
						label: this.addLabel
					}
				}).then(res=>{
					if ( res.data.status == 1 ) {
						this.getLabelList();
						this.$Message.info(' 标签添加成功');
					} else {
						this.$Message.info('新增标签失败！');
						throw '标签添加失败！'
					}
				})
                
            },
            cancel () {
                this.$Message.info('你取消了新增标签！');
            },
			delLabel(id){
				axios.request({
					url: `${url}article/delArticleCate`,
					method: 'post',
					data: {
						id: id
					}
				}).then(res=>{
					if ( res.data.status == 1 ) {
						this.getLabelList();
						this.$Message.info(' 标签删除成功');
					} else {
						throw '标签删除失败！'
					}
				})
			}
		},
		created(){
			this.getLabelList();
		}
	}
</script>

<style>

</style>
